<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="div1">
    <input type="button" value="走" @click = 'lang()'>
    <input type="button" value="停" @click = 'stop()'><br>
    
    <h1>{{ces}}</h1>
    </div>
    <script>
        
        var vm = new Vue({
            el : "#div1",
            data : {
                ces : "↑↗→↓",
                intervalID : null,
                
            },
            methods: {
                lang(){
                    if(this.intervalID != null){
                        return;
                    }
                    this.intervalID =  setInterval ( () => {
                    console.log(this.ces)
                    const head  = this.ces.substring(0,1)
                    const end = this.ces.substring(1)
                    this.ces = end+head
                    },500)
                },
                stop(){
                    clearInterval(this.intervalID)
                    this.intervalID = null
                }
            },
        })
    </script>
</body>
</html>